<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="maximum-scale=1.0,minimum-scale=1.0,user-scalable=0,width=device-width,initial-scale=1.0"/>
    <meta name="format-detection" content="telephone=no" />
    <title>title</title>
    <link rel="stylesheet" type="text/css" href="../css/api.css"/>
    <style>
        html, body {
            background-color: #f8f8f8;
            overflow: hidden;
        }
        .title_p {
        	height: 35px;
        	line-height: 41px;
        	color: #333;
        	font-size: 12px;
        	padding: 0 15px;
        }
        .default_address {
        	background-color: #fff;
        	padding: 15px;
        }
        .default_address .info {
        	color: #333;
        }
        .all_address ul li {
        	margin-bottom: 6px;
        	position: relative;
        }
        .all_address ul li:last-child {
        	margin-bottom: 0;
        }
        .all_address ul li .li_box {
        	background-color: #fff;
        }
        .all_address ul li .li_box .li_boxt {
        	border-bottom: 1px solid #e8e8e8;
        	padding: 14px 15px;
        }
        .all_address ul li .li_box .li_boxt .address_box {
        	display: -webkit-box;
        	display: -webkit-flex;
        	align-items: center;
        }
        .all_address ul li .li_box .li_boxt .address_box .address_boxl {
        	flex: 1;
        	-webkit-flex: 1;
        	box-flex: 1;
        	-webkit-box-flex: 1;
        	padding-right: 5px;
        }
        .address {
        	font-size: 15px;
        	color: #333;
        	margin-bottom: 12px;
        }
        .info {
        	font-size: 12px;
        	color: #999;
        }
        .info .name {
        	margin-right: 8px;
        }
        .all_address ul li .li_box .li_boxt .address_box .address_boxr img {
        	height: 13px;
        	display: block;
        }
        .all_address ul li .li_box .li_boxb {
        	height: 33px;
        	line-height: 33px;
			color: #999;
			font-size: 12px;
			padding: 0 15px;
			display: -webkit-box;
			-webkit-box-align: center;
        }
        .all_address ul li .li_box .li_boxb input {
        	display: none;
        }
        .all_address ul li .li_box .li_boxb img {
        	height: 18px;
        	display: block;
        }
        .all_address ul li .li_box .li_boxb span {
			margin-left: 10px;
			display: block;
        }
        .delete {
        	width: 80px;
        	color: #fff;
        	font-size: 16px;
        	background-color: #e62442;
        	text-align: center;
        	position: absolute;
        	right: -80px;
        	top: 0;
        	bottom: 0;
            display: -webkit-box;
            -webkit-box-align: center;
            -webkit-box-pack: center;
        }
        .delete span {
        	display: block;
        }
        .no_login{
            padding-top: 150px;
            display: none;
        }
        .no_login p {
            text-align: center;
        }
        .login_btn {
            padding:9px 20px;
            text-align: center;
            color: #fff;
            border-radius: 2px;
            background-color: #e62442;
            margin-top: 10px;
        }
        .has_login {
            display: none;
        }
    </style>
</head>
<body>
    <div class="no_login">
        <p>你还没有地址，请填写</p>
        <p><button class="login_btn" onclick="fnAddressDetail();" tapmode>填写地址</button></p>
    </div>
    <div class="has_login">
        <div class="all_address">
        	<ul id="address_ul">
    <!--     		<li ontouchstart="return touchstartF(event, this);" ontouchmove="return touchmoveF(event, this);">
        			<div class="li_box">
    	    			<div class="li_boxt">
    	    				<div class="address_box">
    	    					<div class="address_boxl">
    			    				<div class="address">泰翔商务楼泰翔商务楼泰翔商务楼</div>
    			    				<div class="info">
    			    					<span class="name">关先生</span>
    			    					<span>13333333333</span>
    			    				</div>
    	    					</div>
    	    					<div class="address_boxr">
    	    						<img src="../image/right.png">
    	    					</div>
    	    				</div>
    	    			</div>
    	    			<div class="li_boxb" tapmode onclick="fnDefaultAddress(this);">
    	    				<input type="radio" name="default_address">
    	    				<img class="default_address_icon" src="../image/select_address_off.png">
    	    				<span>当前默认地址</span>
    	    			</div>
        			</div>
        			<div class="delete">
        				<span>删除</span>
        			</div>
        		</li> -->
        	</ul>
        </div>
    </div>
</body>
<script type="text/javascript" src="../script/api.js"></script>
<script type="text/javascript" src="../script/zepto.js"></script>
<script type="text/javascript" src="../script/common.js"></script>
<script type="text/javascript" src="../script/doT.min.js"></script>
<script id="addressTpl" type="text/x-dot-template">
    {{ for(var i=0;i<it.length;i++){ }}
        <li >
            <div class="li_box">
                <div class="li_boxt" onclick="fnChoseAddress({{=it[i]['id']}});" tapmode>
                    <div class="address_box">
                        <div class="address_boxl">
                            <div class="address">{{=it[i]['area_name1']}} {{=it[i]['address_detail']}}</div>
                            <div class="info">
                                <span class="name">{{=it[i]['username']}}</span>
                                <span>{{=it[i]['tel']}}</span>
                            </div>
                        </div>
                        <div class="address_boxr">
                            <img src="../image/right.png">
                        </div>
                    </div>
                </div>
                {{if(i == 0){ }}
                    <div class="li_boxb">
                        {{if(it[i]['is_default'] == 1){ }}
                            <input type="radio" name="default_address" checked="checked">
                            <img class="default_address_icon" src="../image/select_address_on.png">
                            <span>当前默认地址</span>
                        {{ } else{ }}
                            <input type="radio" name="default_address">
                            <img class="default_address_icon" src="../image/select_address_off.png">
                            <span>设为默认地址</span>
                        {{ }; }}
                    </div>
                {{ } else{ }}
                    <div class="li_boxb" tapmode onclick="fnDefaultAddress(this,{{=it[i]['id']}});">
                        {{if(it[i]['is_default'] == 1){ }}
                            <input type="radio" name="default_address" checked="checked">
                            <img class="default_address_icon" src="../image/select_address_on.png">
                        {{ } else{ }}
                            <input type="radio" name="default_address">
                            <img class="default_address_icon" src="../image/select_address_off.png">
                        {{ }; }}
                        <span>设为默认地址</span>
                    </div>
                {{ }; }}
                
            </div>
            <div class="delete" onclick="fndeleteAddress({{=it[i]['id']}},this);" tapmode>
                <span>删除</span>
            </div>
        </li>
    {{ }; }}
</script>
<script type="text/javascript">
    apiready = function(){
        user = $api.getStorage('user_data');
        fnGetAddress();
        api.addEventListener({
            name: 'changeAddressList'
        }, function(ret, err) {
            if (ret) {
                fnGetAddress(1);
            }
        });
    };

    function touchstartF(event) {
	    x = event.changedTouches[0].pageX;
	    y = event.changedTouches[0].pageY;
	    swipeX = true;
	    swipeY = true;
	}

	function touchmoveF(event, e) {
	    X = event.changedTouches[0].pageX;
	    Y = event.changedTouches[0].pageY;
	    // 左右滑动
	    if (swipeX && Math.abs(X - x) - Math.abs(Y - y) > 0) {
	        // 阻止事件冒泡
	        event.stopPropagation();
	        if (X - x > 10) {
	            event.preventDefault();
	            e.style.WebkitTransform = "translateX(" + 0 + "px)";
	            e.style.transition = "-webkit-transform 300ms ease-in-out";
	        }
	        if (x - X > 10) {
	            event.preventDefault();
	            e.style.WebkitTransform = "translateX(" + -80 + "px)";
	            e.style.transition = "-webkit-transform 300ms ease-in-out";
	        }
	        swipeY = false;
	    }
	    // 上下滑动
	    if (swipeY && Math.abs(X - x) - Math.abs(Y - y) < 0) {
	        swipeX = false;
	    }
	}

        //设为默认地址
    function fnDefaultAddress(this_,id_) {
        openLoading();
        $('.default_address_icon').attr('src', '../image/select_address_off.png');
        $(this_).children('input[name=default_address]').prop('checked', true);
        $(this_).children('.default_address_icon').attr('src', '../image/select_address_on.png');

        //服务器设置默认地址
        api.ajax({
            url: rootPath + '/api/user/set_address_default',
            method: 'post',
            data: {
                values: { 
                    uid: user.id,
                    id : id_,
                    token:user.token
                },
            }
        }, function(ret, err) {
            if (ret) {
                if(ret.status == 200){
                    closeLoading();
                    fnGetAddress(1);
                }
            } else {
                closeLoading();
                showError(err.code,err.msg);
            }
        });
    }

    function fnGetAddress(refresh) {
        openLoading();
        api.ajax({
            url : rootPath + '/api/user/get_user_address',
            data: {
                values: { 
                    uid : user.id,
                    token:user.token,
                },
            },
            cache : true
        },function(ret,err){
            if(ret) {
                if(refresh == 1) {
                    $('#address_ul').empty();
                }
                if(ret.status == 200) {
                    $('.has_login').show();
                    $('.no_login').hide();
       
                    if(ret['data'].length == 0) {
                        $('.all_wrap').hide();
                    }else {
                        $('.all_wrap').show();
                    }
                    fnSetAddress(ret.data);
                }else {
                    // api.closeWin();
                    $('.has_login').hide();
                    $('.no_login').show();
                }
            }else {
                showError(err.code,err.msg);
            }
            closeLoading();
        })

    }

    //装入预约数据
    function fnSetAddress(data_) {
        var listT = $api.byId('addressTpl');
        var listTFn = doT.template(listT.text);
        var html = listTFn(data_);
        var list = $api.byId('address_ul');
        $api.append(list, html);
        api.parseTapmode();
    }

    //地址详情
    function fnToEditAddress(id_) {
        api.openWin({
            name: 'edit_address',
            url: './edit_address.html',
            pageParam: {
                id : id_,
            }
        });
    }

    //删除地址
    function fndeleteAddress(id_,this_) {
        api.ajax({
            url: rootPath + '/api/user/address_delete',
            method: 'post',
            data: {
                values: { 
                    id: id_,
                    uid : user.id,
                    token:user.token
                },
                
            }
        }, function(ret, err) {
            if (ret) {
                if(ret.status == 200) {
                    api.toast({
                        msg: '删除成功',
                        location: "middle"
                    });
     
                    $(this_).parents('li').remove();
                }
            } else {
                showError(err.code,err.msg);
            }
        });

    }

    function fnChoseAddress(id_) {
        api.sendEvent({
            name: 'addressChangeEvent',
            extra: {
                id: id_, 
            }
        });
        api.closeWin();
    }

    function fnChoseDefaultAddress() {
        api.sendEvent({
            name: 'addressChangeEvent',
            extra: {
                id: default_id, 
            }
        });
        api.closeWin();
    }

    function fnAddressDetail() {
        api.openWin({
            name: 'add_address',
            url: './add_address.html',
        });
    }
</script>
</html>